import React from 'react';
import { useTheme } from '../contexts/ThemeContext';
import { Button, Tooltip } from 'antd';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';

const ThemeSwitcher: React.FC = () => {
    const { theme, toggleTheme } = useTheme();

    return (
        <Tooltip title={theme === 'light' ? '切换到深色主题' : '切换到浅色主题'}>
            <Button
                type="text"
                icon={theme === 'light' ? <MoonOutlined /> : <SunOutlined />}
                onClick={toggleTheme}
                style={{
                    color: theme === 'light' ? '#666' : '#fff',
                    border: 'none',
                    background: 'transparent',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '32px',
                    height: '32px',
                    borderRadius: '6px',
                    transition: 'all 0.3s ease'
                }}
            />
        </Tooltip>
    );
};

export default ThemeSwitcher;

